<template>
    <div id="app">
        <div class="container">
            <div class="data-grid" :class="{ 'two-columns': !isShow }">
                <!-- 设备基本信息卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-microchip"></i>
                        <h2>设备基本信息</h2>
                    </div>
                    <div class="card-body">
                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-hashtag"></i>
                                设备识别码
                            </div>
                            <div class="value"><span class="badge badge-info">{{ equipmentId }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-server"></i>
                                设备类型
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.deviceType }}</span>
                            </div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-barcode"></i>
                                产品ID
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.productId }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-id-card"></i>
                                设备ID
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.deviceId }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-id-card"></i>
                                ICCID
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.iccid }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-id-card"></i>
                                SIM卡
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.imsi }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-wrench" ></i>
                                通信协议
                            </div>
                            <div class="value"> <span class="badge badge-info">{{ fireCockData.protocol }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-clock-o" ></i>
                                发送时间
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.sendTime }}</span></div>
                        </div>
                    </div>
                </div>

                <!-- 设备元数据卡片 -->
                <div class="card" v-if="isShow">
                    <div class="card-header">
                        <i class="fa fa-info-circle"></i>
                        <h2>设备元数据</h2>
                    </div>
                    <div class="card-body">
                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-envelope"></i>
                                物理小区标识
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.pci }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-link"></i>
                                参考信号接收功率
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.rsrp }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-building"></i>
                                小区标识
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.cellId }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-feed"></i>
                                信号干扰加噪声比
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.sinr }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-home"></i>
                                小区唯一标识
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.ecl }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-list-ol"></i>
                                位置信息
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.location }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-code"></i>
                                电源类型
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.powerType }}</span>
                            </div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-hdd-o"></i>
                                设备固件版本号
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.version }}</span></div>
                        </div>

                        <div class="data-row">
                            <div class="label">
                                <i class="fa fa-slack"></i>
                                设备型号
                            </div>
                            <div class="value"><span class="badge badge-info">{{ fireCockData.devModel }}</span></div>
                        </div>
                    </div>
                </div>

                <!-- 动态字段卡片 -->
                <div class="card" v-if="isShow">
                    <div class="card-header">
                        <i class="fa fa-cogs"></i>
                        <h2>设备基本配置</h2>
                    </div>
                    <div class="card-body">
                        <div class="dynamic-fields">
                            <div class="field-tag">
                                <div class="key">数据发送间隔(s)</div>
                                <div class="val">{{ fireCockData.sendInterval }}</div>
                            </div>
                        </div>
                        <div class="dynamic-fields">
                            <div class="field-tag">
                                <div class="key">自检间隔天数(day)</div>
                                <div class="val">{{ fireCockData.selfCheckDays }}</div>
                            </div>
                        </div>
                        <div class="dynamic-fields">
                            <div class="field-tag">
                                <div class="key">数据采样间隔(s)</div>
                                <div class="val">{{ fireCockData.sampInterval }}</div>
                            </div>
                        </div>
                        <div class="dynamic-fields">
                            <div class="field-tag">
                                <div class="key">告警门限</div>
                                <div class="val">{{ fireCockData.alarmsTh }}</div>
                            </div>
                        </div>
                        <div class="dynamic-fields">
                            <div class="field-tag">
                                <div class="key">设备功能配置位</div>
                                <div class="val">{{ fireCockData.featuresBits }}</div>
                            </div>
                        </div>
                        <div class="dynamic-fields">
                            <div class="field-tag">
                                <div class="key">网络类型</div>
                                <div class="val">{{ fireCockData.network }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payload 卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-database"></i>
                        <h2>传感器数据报告</h2>
                    </div>
                    <div class="card-body">
                        <div v-if="fireCockData.alarm">

                            <div class="data-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-signal"></i>
                                        CSQ
                                    </div>
                                    <div class="value"><span class="badge badge-info">{{ fireCockData.csq }} </span>
                                    </div>
                                </div>

                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-bell"></i>
                                        系统告警
                                    </div>
                                    <div class="value">
                                        <span v-if="fireCockData.alarm === 0"
                                              class="badge badge-success">正常</span>
                                        <span v-else class="badge badge-danger">告警</span>
                                    </div>
                                </div>

                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-exclamation-triangle"></i>
                                        告警数据
                                    </div>
                                    <div class="value"><span class="badge badge-danger">{{ fireCockData.alarmsDat }}</span></div>
                                </div>

                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-table"></i>
                                        传感器数据
                                    </div>
                                    <div class="value"><span class="badge badge-info">{{ fireCockData.sensorDat }}</span></div>
                                </div>

                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-laptop"></i>
                                        设备类型
                                    </div>
                                    <div class="value"><span class="badge badge-info">{{ fireCockData.devType }}</span></div>
                                </div>

                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-calendar"></i>
                                        数据采样时间
                                    </div>
                                    <div class="value"><span class="badge badge-info">{{ fireCockData.sampTime }}</span></div>
                                </div>

                                <div class="data-row">
                                    <div class="label">
                                        <i class="fa fa-battery-full"></i>
                                        电量百分比
                                    </div>
                                    <div class="value">
                                        <div style="display: flex; align-items: center; justify-content: flex-end;">
                                            <span style="margin-right: 10px;">{{ fireCockData.batLevel }}%</span>
                                            <div style="width: 80px; height: 8px; background: #334155; border-radius: 4px; overflow: hidden;">
                                                <div :style="{width: fireCockData.batLevel + '%', height: '100%', background: batteryColor(fireCockData.batLevel)}"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        data() {
            return {
                isShow: true,

                equipmentInputStoreId: this.$route.query.equipmentInputStoreId || '',
                equipmentId: this.$route.query.equipmentId || '',
                warnTime: this.$route.query.warnTime || '',
                fireCockData: {
                    equipmentInputStoreId: null,
                    sendTime: "",
                    upPacketSn: null,
                    deviceType: "",
                    productId: "",
                    deviceId: "",
                    protocol: "",
                    messageType: "",
                    assocAssetId: "",
                    tenantId: "",
                    imsi: "",
                    topic: "",
                    upDataSn: null,
                    serviceId: "",
                    pci: null,
                    rsrp: null,
                    cellId: null,
                    sinr: null,
                    ecl: null,
                    iccid: "",
                    location: "",
                    powerType: null,
                    devType: null,
                    version: "",
                    devModel: null,
                    sendInterval: null,
                    selfCheckDays: null,
                    sampInterval: null,
                    alarmsTh: "",
                    featuresBits: null,
                    network: "",
                    csq: null,
                    alarmsDat: "",
                    alarm: null,
                    sensorDat: "",
                    sampTime: "",
                    batLevel: null,
                    event: null
                }
            }
        },
        methods: {
            async fetchRealtimeData() {
                try {
                    let response = '';
                    if (this.warnTime != "") {
                        this.isShow = false
                        response = await request.get("/warn-fire-cock/getInfo?equipmentInputStoreId=" + this.equipmentInputStoreId + "&warnTime=" + this.warnTime);
                    } else {
                        response = await request.get(`/current-fire-cock/${this.equipmentInputStoreId}`);
                    }

                    if (response.data) {
                        this.parseRealtimeData(response.data);
                    }
                } catch (error) {
                    console.error('获取实时数据失败:', error);
                }
            },

            parseRealtimeData(data) {
                console.log(data)
                // 直接映射所有字段
                Object.keys(this.fireCockData).forEach(key => {
                    if (data[key] !== undefined) {
                        this.fireCockData[key] = data[key];
                    }
                });
                // 处理报警信息（原逻辑保留）
                this.handleAlarms();
            },

            // 处理报警信息
            handleAlarms() {

            },
            batteryColor(level) {
                if (level > 70) return '#34d399';
                if (level > 30) return '#f59e0b';
                return '#ef4444';
            }
        },
        mounted() {
            // 启动定时更新数据(每60秒)
            this.updateTimer = setInterval(() => {
                this.fetchRealtimeData();
            }, 60000);

            // 初始加载数据
            this.fetchRealtimeData();
        },
        beforeDestroy() {
            // 清除定时器
            if (this.updateTimer) {
                clearInterval(this.updateTimer);
            }
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', sans-serif;
        background: linear-gradient(135deg, #0f172a, #1e293b);
        color: #e2e8f0;
        min-height: 100vh;
        padding: 20px;
        line-height: 1.6;
    }

    .container {
        width: 100%;
        margin: 0 auto;
    }

    header {
        text-align: center;
        padding: 40px 0 30px;
        margin-bottom: 30px;
        position: relative;
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    .logo-icon {
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        width: 60px;
        height: 60px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    }

    .logo-icon i {
        font-size: 28px;
    }

    h1 {
        font-size: 2.8rem;
        font-weight: 700;
        background: linear-gradient(90deg, #93c5fd, #60a5fa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
    }

    .subtitle {
        color: #94a3b8;
        font-size: 1.25rem;
        max-width: 800px;
        margin: 0 auto;
        line-height: 1.7;
    }

    /* 修改网格布局为四列 */
    .data-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(250px, 1fr));
        gap: 25px;
        margin-bottom: 30px;
    }

    .card {
        background: rgba(30, 41, 59, 0.7);
        backdrop-filter: blur(12px);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        border: 1px solid rgba(100, 116, 139, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }

    .card-header {
        padding: 22px 25px;
        display: flex;
        align-items: center;
        background: rgba(15, 23, 42, 0.7);
        border-bottom: 1px solid rgba(100, 116, 139, 0.2);
    }

    .card-header i {
        font-size: 1.4rem;
        margin-right: 15px;
        color: #60a5fa;
    }

    .card-header h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #e2e8f0;
    }

    .card-body {
        padding: 25px;
        overflow: hidden;
    }

    .data-row {
        display: flex;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(100, 116, 139, 0.1);
    }

    .data-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .label {
        flex: 1;
        font-weight: 500;
        color: #cbd5e1;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
    }

    .label i {
        margin-right: 10px;
        width: 20px;
        color: #93c5fd;
    }

    .value {
        flex: 1.5;
        color: #f8fafc;
        font-weight: 500;
        word-break: break-word;
        text-align: right;
        font-weight: 600;
    }

    .value.highlight {
        color: #60a5fa;
        font-weight: 700;
    }

    .badge {
        display: inline-block;
        padding: 5px 14px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-left: 10px;
    }

    .badge-info {
        background: rgba(56, 189, 248, 0.15);
        color: #38bdf8;
    }

    .badge-success {
        background: rgba(52, 211, 153, 0.15);
        color: #34d399;
    }

    .badge-warning {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
    }

    .badge-danger {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

    /* 优化动态字段布局 */
    .dynamic-fields {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }

    .field-tag {
        background: rgba(56, 189, 248, 0.1);
        border: 1px solid rgba(56, 189, 248, 0.2);
        border-radius: 10px;
        padding: 12px 15px;
    }

    .field-tag .key {
        color: #93c5fd;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .field-tag .val {
        color: #f8fafc;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .payload-card {
        background: rgba(15, 23, 42, 0.5);
        border-radius: 15px;
        padding: 25px;
        margin-top: 20px;
        border-left: 4px solid #60a5fa;
    }

    .payload-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .payload-header i {
        font-size: 1.3rem;
        color: #60a5fa;
        margin-right: 15px;
    }

    .payload-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #e2e8f0;
    }

    .service-tag {
        display: inline-block;
        padding: 6px 16px;
        border-radius: 20px;
        background: linear-gradient(135deg, #8b5cf6, #ec4899);
        color: white;
        font-size: 0.9rem;
        font-weight: 600;
        margin-left: 15px;
        vertical-align: middle;
    }

    /* 优化Payload内部网格 */
    .payload-card .data-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 10px;
    }

    .stat-card {
        background: rgba(30, 41, 59, 0.6);
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        border: 1px solid rgba(100, 116, 139, 0.2);
    }

    .stat-card .title {
        color: #94a3b8;
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .stat-card .value {
        color: #f8fafc;
        font-size: 1.8rem;
        font-weight: 700;
        text-align: center;
        margin: 0;
    }

    .footer {
        text-align: center;
        color: #64748b;
        padding: 30px 0 20px;
        margin-top: 20px;
        font-size: 0.95rem;
        border-top: 1px solid rgba(100, 116, 139, 0.2);
    }

    .empty-value {
        color: #94a3b8;
        font-style: italic;
        font-weight: 400;
    }

    /* 当 isShow=false 时的特殊布局 */
    .data-grid.two-columns {
        grid-template-columns: repeat(2, minmax(250px, 1fr)) !important; /* 强制两列布局 */
    }

    /* 确保单个卡片在 isShow=false 时占50%宽度 */
    .data-grid.two-columns .card {
        width: 100% !important; /* 卡片宽度100%填充网格列 */
    }

    /* 响应式设计 - 中等屏幕 */
    @media (max-width: 1300px) {
        .data-grid {
            grid-template-columns: repeat(2, minmax(300px, 1fr));
        }
        .data-grid.two-columns {
            grid-template-columns: repeat(2, minmax(300px, 1fr)) !important; /* 保持两列 */
        }
    }

    /* 响应式设计 - 小屏幕 */
    @media (max-width: 768px) {
        .data-grid {
            grid-template-columns: 1fr;
        }

        h1 {
            font-size: 2.2rem;
        }

        .subtitle {
            font-size: 1.1rem;
        }

        .payload-card .data-grid {
            grid-template-columns: 1fr !important;
        }
        .data-grid.two-columns {
            grid-template-columns: 1fr !important; /* 小屏幕恢复单列 */
        }
    }
</style>
